<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" id="img" name="img">
        <img src="" class="oimg" alt="">
        <input type="submit">
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script>
        // FileReader 对象
        // base64
        $("#img").change(function(){
            console.log(this.files)
            let img = this.files[0];
            let fd = new FileReader();
            fd.readAsDataURL(img);
            // 是异步
            fd.onload = function(){
                // 文件读取完毕时触发 结果 在事件源 result属性
                console.log(this.result)
                $(".oimg").attr('src',this.result)
            }
        })
    </script>
</body>
</html>